<template>
  <div class="container flex-col">
    <div class="flex-row-center space-between">
      <span class="page_title">考试详情: {{ data.examDetail.title }}</span>
    </div>
    <div class="comm_border flex-row flex_1 " style="margin-top: 16px; ">
      <div class="flex-col " style="width: 600px;">
        <div class="flex-row-center space-between" style="margin: 8px 24px 0 24px;">
          <div class="flex-row-center">
            <span class="search_title">科室</span>
            <el-select v-model="data.selectOfficeCode" size="large" style="margin-left: 16px; width: 200px;"
                       placeholder="请选择科室">
              <el-option
                  v-for="(qtType, index) in data.listOffice"
                  :key="index"
                  :label="qtType.officeName"
                  :value="qtType.officeCode"
              ></el-option>
            </el-select>
          </div>
          <el-button type="primary" class="search_btn_primary" @click="click_search">搜索</el-button>
        </div>
        <div class="flex_1" style="margin: 16px 16px auto">
          <el-table :data="data.listExamUserInfo" border :row-class-name="tableRowClassName">
            <el-table-column prop="index" label="序号" width="60"/>
            <el-table-column prop="officeName" label="科室名称"/>
            <el-table-column prop="userName" label="姓名" width="80"/>
            <el-table-column prop="score" label="分值" width="60"/>
            <el-table-column prop="createTimeStr" label="创建时间" width="180"/>
            <el-table-column label="操作" width="60px">
              <template #default="scope">
                <el-button link size="small" @click="click_preview(scope.$index, scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-row-reverse-center" style="height: 50px;">
          <el-pagination
              v-model:current-page="pager.currentPage"
              v-model:page-size="pager.pageSize"
              :page-sizes="[10,20,50,100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
      <div class="comm_split_v"></div>
      <div class="flex_1 flex-col" style="margin:24px; overflow-y: auto;height: calc(100vh - 200px);">
        <div :key="item" v-for="(item,i) in data.examDetail.listExamUserAnswerVo">
          <div class="flex-col">
            <span class="qtTitle">{{ item.index }}: {{ item.title }} ({{ item.qtTypeStr }} {{ item.score }}分)</span>
            <div class="flex-col" style="margin-top: 8px;" v-for="item_item in item.listItemInfo">
              <div class="flex-row-center">
                <el-checkbox :model-value="item_item.isAnswer" class="option">{{ item_item.content }}
                  ({{ item_item.score }}分)
                </el-checkbox>
              </div>
            </div>
          </div>
          <div v-if="i!=data.examDetail.listExamUserAnswerVo.length-1" class="comm_split_h"
               style="margin-top: 8px; margin-bottom: 8px;"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, shallowRef} from "vue";
import {QtBankVO} from "@/type/vo/QtBankVO";
import {ElMessage} from "element-plus";
import {addDialog} from "@/components/gDialog/index";
import {tickAsTimeString} from "@/utils/TimeUtil";
import {useRoute} from "vue-router";
import {api_pageExamUserDetailInfo, api_pageExamUserInfo} from "@/request/apis/publicApi";
import {ExamUserInfoVO} from "@/type/vo/ExamUserInfoVO";
import {OfficeInfoVO} from "@/type/vo/OfficeInfoVO";
import {api_getOfficeList} from "@/request/apis/hospitalApi";
import {ExamVO} from "@/type/vo/ExamVO";
import msg from '@/components/msg'
import {QtTypeAsString} from "@/utils/EnumHelper";
import {ExamRecordUserAnswerVo} from "@/type/vo/ExamRecordUserAnswerVo";

const route = useRoute();
const examId = route.query.examId as string;

const data = reactive({
  officeCode: '',
  listQtBank: Array<QtBankVO>(),
  listExamUserInfo: Array<ExamUserInfoVO>(),
  listOffice: Array<OfficeInfoVO>(),
  examDetail: {} as ExamRecordUserAnswerVo,
  selectOfficeCode: ''
})
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})

const click_search = () => {
  pager.currentPage = 1;
  search_pri();
}

const click_preview = async (index: number, row: ExamUserInfoVO) => {
  //这里查询
  const r = await api_pageExamUserDetailInfo(row.examId, row.userId);
  if (!r) {
    await msg.info('数据异常', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`, '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  data.examDetail = r.data;
  for (let i = 0; i < data.examDetail.listExamUserAnswerVo.length; i++) {
    data.examDetail.listExamUserAnswerVo[i].index = i + 1;
    const qt = data.examDetail.listExamUserAnswerVo[i];
    qt.qtTypeStr = QtTypeAsString(qt.qtType);
    const listItemInfo = qt.listItemInfo;
    const listUserAnswer = qt.listUserAnswer;
    for (let j = 0; j < listItemInfo.length; j++) {
      for (let k = 0; k < listUserAnswer.length; k++) {
        if (listItemInfo[j].qbItemId == listUserAnswer[k].answerId) {
          listItemInfo[j].isAnswer = true;
        }
      }
    }

  }
}


onMounted(async () => {
  await getOfficeList();
  await search_pri();
})

const getOfficeList = async () => {
  const r = await api_getOfficeList();
  if (!r) {
    await msg.info('数据异常', '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  if (r.code != 0) {
    await msg.info(`数据异常!  ${r.code} msg：${r.msg}`, '提示', {
      confirmButtonText: '确定'
    });
    return;
  }
  data.listOffice = r.data;
  data.listOffice.unshift({
    officeCode: '',
    officeName: '全部'
  });
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  search_pri();
}

const search_pri = async () => {
  data.listQtBank.length = 0;
  const page = pager.currentPage;
  const limit = pager.pageSize;

  const r = await api_pageExamUserInfo(examId, data.officeCode, page, limit);
  if (!r) {
    await msg.error('数据异常!');
    return;
  }
  if (r.code != 0) {
    await msg.error(`错误! ${r.code}${r.msg}`);
    return;
  }
  if (r.data && r.data.records) {
    for (let i = 0; i < r.data.records.length; i++) {
      r.data.records[i].index = i + 1;
      r.data.records[i].createTimeStr = tickAsTimeString(r.data.records[i].createTime)
    }
  }
  data.listExamUserInfo = r.data.records;
  pager.total = r.data.total;
}

const handleCurrentChange = (val: number) => {
  search_pri();
}

interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
                             row,
                             rowIndex,
                           }: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}


async function btn_click_create_qt() {
  try {
    addDialog({
      title: "创建题目",
      component: shallowRef(QtCreate),
      width: "600px",
      props: {},
      callBack: async (goEdit: Boolean) => {
        if (goEdit) {
          ElMessage.success('创建成功!');
          await search_pri();
        } else {
          // tableList.data[index as number] = data
        }
        console.log(data, "data")
      }
    })
    // 处理确认操作
  } catch (error) {
    // 处理取消操作
  }
}
</script>

<style scoped>
.btn_top {
  border: none;
  height: 48px;
  padding: 13px 28px;
  background-color: white;
  border-radius: 12px;
  color: #3F8CFF;
  font-size: 16px;
  font-weight: 400;
}


.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

</style>